@import "tailwindcss";

@font-face {
	font-family: "Aux Mono";
	src: url("/fonts/Aux Mono.woff") format("woff");
	font-weight: normal;
	font-style: normal;
	text-rendering: optimizeLegibility;
}

@theme {
	--font-mono: "Aux Mono", "monospace";
	--font-base: "10px";
	--color-gensyn-pink: #fad7d1;
	--color-gensyn-brown: #2a0d04;
	--color-gensyn-green: #00962f;
}

html {
	font-size: 13px;
}

mark {
	@apply inline bg-gensyn-brown text-gensyn-pink;
}

@supports (scrollbar-color: auto) {
	#gossip-container,
	#leaderboard-container {
		scrollbar-width: auto;
		scrollbar-color: rgba(0, 0, 0, 0.2) var(--color-gensyn-pink);
	}
}

@supports selector(::-webkit-scrollbar) {
	#gossip-container::-webkit-scrollbar,
	#leaderboard-container::-webkit-scrollbar {
		width: 15px;
	}
	#gossip-container::-webkit-scrollbar-thumb,
	#leaderboard-container::-webkit-scrollbar-thumb {
		background: rgba(0, 0, 0, 0.05);
		border: 1px solid var(--color-gensyn-brown);
	}
	#gossip-container::-webkit-scrollbar-track,
	#leaderboard-container::-webkit-scrollbar-track {
		background: transparent;
		border: 1px solid var(--color-gensyn-brown);
	}
}

.no-marker::-webkit-details-marker {
	display: none;
}

.no-marker::marker {
	display: none;
}
